<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      table {
        width: 400px;
        border: 1px solid #000;
        border-collapse: collapse;
        margin: 0 auto;
      }

      td,
      th {
        border: 1px solid #000;
        text-align: center;
      }

      input {
        width: 50px;
      }

      .search {
        width: 600px;
        margin: 20px auto;
      }
    </style>
  </head>

  <body>
    <div class="search">
      按照价格查询: <input type="text" class="start" /> -
      <input type="text" class="end" />
      <button class="search-price">搜索</button> 按照商品名称查询:
      <input type="text" class="product" />
      <button class="search-pro">查询</button>
    </div>
    <table>
      <thead>
        <tr>
          <th>id</th>
          <th>产品名称</th>
          <th>价格</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
    <script>
      // 利用新增数组方法操作数据
      var data = [
        {
          id: 1,
          pname: "小米",
          price: 3999,
        },
        {
          id: 2,
          pname: "oppo",
          price: 999,
        },
        {
          id: 3,
          pname: "荣耀",
          price: 1299,
        },
        {
          id: 4,
          pname: "华为",
          price: 1999,
        },
      ];

      var search = document.querySelector(".search-price"); // 搜索框按钮
      var start = document.querySelector(".start"); // 起始的按钮
      var end = document.querySelector(".end"); // 结束的按钮
      var pro = document.querySelector(".search-pro"); // 查询按钮
      var product = document.querySelector(".product"); // 查询框
      //  1.创建一个渲染数据的函数
      function render(arr) {
        // 声明一个空的数组
        var star = [];
        // 循环遍历这个data数组
        arr.forEach(function (i) {
          // 采用字符模板的方式  push 到star里面去
          star.push(
            `
            <tr>
              <td>${i.id}</td>
              <td>${i.pname}</td>
              <td>${i.price}</td>
            </tr>
            `
          );
        });
        // 将star数组里面的值   渲染到tbody里面去
        document.querySelector("tbody").innerHTML = star.join("");
      }
      // 调用函数渲染
      render(data);
      // 2.为搜索按钮  添加点击事件
      search.addEventListener("click", function () {
        // 声明一个 sum的变量  用来接收产生的新数组
        var sum = data.filter(function (i) {
          // 判断 大于开始的值   小于结束的值
          return i.price >= start.value && i.price <= end.value;
        });
        // 调用函数   重新渲染页面
        render(sum);
      });
      //  给查询按钮  绑定点击事件
      pro.addEventListener("click", function () {
        // 创建一个 空数组
        var arr = [];
        // 遍历data  这个数组
        data.some(function (i) {
          // 判断如果 输入框的值   等于 data里面的pnanme的值时  将值传入arr空数组里
          if (product.value === i.pname) {
            arr.push(i);
            // 手动停止
            return true;
          }
        });
        // 调用函数   渲染页面
        render(arr);
        // 搜索后清空  输入框的值
        product.value = '';
      });
      // // 1. 获取相应的元素
      // var tbody = document.querySelector('tbody');
      // var search_price = document.querySelector('.search-price');
      // var start = document.querySelector('.start');
      // var end = document.querySelector('.end');
      // var product = document.querySelector('.product');
      // var search_pro = document.querySelector('.search-pro');
      // setDate(data);
      // // 2. 把数据渲染到页面中
      // function setDate(mydata) {
      //     // 先清空原来tbody 里面的数据
      //     tbody.innerHTML = '';
      //     mydata.forEach(function(value) {
      //         // console.log(value);
      //         var tr = document.createElement('tr');
      //         tr.innerHTML = '<td>' + value.id + '</td><td>' + value.pname + '</td><td>' + value.price + '</td>';
      //         tbody.appendChild(tr);
      //     });
      // }

      // // 3. 根据价格查询商品
      // // 当我们点击了按钮,就可以根据我们的商品价格去筛选数组里面的对象
      // search_price.addEventListener('click', function() {
      //     // alert(11);
      //     var newDate = data.filter(function(value) {
      //         return value.price >= start.value && value.price <= end.value;
      //     });
      //     console.log(newDate);
      //     // 把筛选完之后的对象渲染到页面中
      //     setDate(newDate);
      // });
      // // 4. 根据商品名称查找商品
      // // 如果查询数组中唯一的元素, 用some方法更合适,因为它找到这个元素,就不在进行循环,效率更高]
      // search_pro.addEventListener('click', function() {
      //     var arr = [];
      //     data.some(function(value) {
      //         if (value.pname === product.value) {
      //             // console.log(value);
      //             arr.push(value);
      //             return true; // return 后面必须写true
      //         }
      //     });
      //     // 把拿到的数据渲染到页面中
      //     setDate(arr);
      // })

      //   var tbody = document.querySelector("tbody");
      //   var son = document.querySelector(".search-price");
      //   var start = document.querySelector(".start");
      //   var end = document.querySelector(".end");
      //   var product = document.querySelector('.product');
      //   var search = document.querySelector('.search-pro');
      //   setDate(data);
      //   function setDate(mydata) {
      //     tbody.innerHTML = "";
      //     mydata.forEach(function (value) {
      //       var tr = document.createElement("tr");
      //       tr.innerHTML =
      //         "<td>" +
      //         value.id +
      //         "</td><td>" +
      //         value.pname +
      //         "</td><td>" +
      //         value.price +
      //         "</td>";
      //       tbody.appendChild(tr);
      //     });
      //   }
      //   son.addEventListener("click", function () {
      //     var sum = data.filter(function (value) {
      //       return value.price >= start.value && value.price <= end.value;
      //     });
      //     setDate(sum);
      //   });
      //   search.addEventListener('click',function() {
      //       var arr = [];
      //       data.some(function (value) {
      //           if (product.value === value.pname) {
      //             arr.push(value);
      //             return true;
      //           }
      //       })
      //       setDate(arr)
      //   })

      // var tbody = document.querySelector("tbody"); // 父盒子
      // var son = document.querySelector(".search-price"); // 搜索按钮
      // var start = document.querySelector(".start"); // 起始表单
      // var end = document.querySelector(".end"); // 结束表单
      // var product = document.querySelector(".product"); // 搜索框
      // var search = document.querySelector(".search-pro"); // 搜索按钮
      // // 页面刷新时就调用函数  渲染页面
      // setDate(data);
      // // 封装函数  用来渲染数据
      // function setDate(mydata) {
      //   //  当点击 搜索按钮后 先清空数据  在重新渲染
      //   tbody.innerHTML = "";
      //   // 遍历data  数组对象  用来渲染数据
      //   mydata.forEach(function (value) {
      //     // 创建tr  行
      //     var tr = document.createElement("tr");
      //     // 添加 列
      //     tr.innerHTML =
      //       "<td>" +
      //       value.id +
      //       "</td><td>" +
      //       value.pname +
      //       "</td><td>" +
      //       value.price +
      //       "</td>";
      //     // 将tr  添加到tbody里面
      //     tbody.appendChild(tr);
      //   });
      // }
      // // 给son 搜索按钮绑定点击事件
      // son.addEventListener("click", function () {
      //   // 因为 filter  返回的是一个新的数组   使用创建变量用来接收数据
      //   var sum = data.filter(function (value) {
      //     // 判断 如果大于起始值 并且  小于 结束值  这返回
      //     return value.price >= start.value && value.price <= end.value;
      //   });
      //   // 调用函数   重新渲染数据
      //   setDate(sum);
      // });

      // search.addEventListener("click", function () {
      //   var arr = [];
      //   data.some(function (value) {
      //     if (product.value === value.pname) {
      //       arr.push(value);
      //       return true;
      //     }
      //   });
      //   setDate(arr);
      // });
    </script>
  </body>
</html>
